<template>
  <div class="home card">
    <div class="top">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="主诊团队123">
          <el-select v-model="zztdvalue" placeholder="" size="min" style="width: 180px">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="主诊医生">
          <el-input v-model="formInline.user" placeholder="" clearable />
        </el-form-item>
        <el-form-item label="患者">
          <el-input v-model="formInline.user" placeholder="" clearable />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchbutton">搜索</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="contentbox">
      <div class="table-box">
        <el-table :data="datalist" border style="width: 100%">
          <el-table-column prop="name" label="编号" width="120" />
          <el-table-column prop="date" label="患者姓名" width="120">
            <template #default="scope">
              <span class="hzbox" @click="hzxqbutton(scope.row)">{{ scope.row.date }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="address" label="身份证号" />
          <el-table-column prop="address" label="手机号" />
          <el-table-column prop="address" label="入组时间" />
          <el-table-column prop="address" label="项目分组 " />
        </el-table>
        <div class="fybox">
          <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
            :page-sizes="[10, 50, 100, 200]" layout="total, sizes, prev, pager" :total="400"
            @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup name="home">
import { ref, reactive } from "vue";
import { Delete, EditPen, Download, Upload, View, Refresh } from "@element-plus/icons-vue";
const router = useRouter();
const activeName = ref("1");
let dialogVisible = ref(false)
const handleClick = tab => {
  console.log(activeName.value);
};
let datalist = ref([
  {
    date: "张三",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles"
  },
  {
    date: "2016-05-02",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles"
  },
  {
    date: "2016-05-04",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles"
  },
  {
    date: "2016-05-01",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles"
  }
]);
const zztdvalue = ref('')
const options = [
  {
    value: 'Option1',
    label: 'Option1',
  },
  {
    value: 'Option2',
    label: 'Option2',
  },
  {
    value: 'Option3',
    label: 'Option3',
  },
  {
    value: 'Option4',
    label: 'Option4',
  },
  {
    value: 'Option5',
    label: 'Option5',
  },
]
const ruleFormRef = ref(null)
const formInline = reactive({
  user: '',
  region: '',
  date: '',
})
let currentPage = ref(1)
let pageSize = ref(10)
let handleSizeChange = () => {
}
let handleCurrentChange = () => {
}
let hzxqbutton = (e) => {
  console.log(e)
  router.push({
    path: "/hzinfo"
  })
}
const form = reactive({
  sbh: '',
  name: '',
  phone: "",
  xty: "",
})
const searchbutton = () => {
  console.log('submit!')
}
const savebutton = async (formEl) => {
  ruleFormRef.value?.validate((valid) => {
    if (valid) {
      console.log('submit!', form)
      // 在这里处理表单提交逻辑
      dialogVisible.value = false
    } else {
      ElMessage.error('请检查表单信息')
    }
  })
}
</script>
<style scoped lang="scss">
.home {
  width: 100%;
  height: 100%;

  .contentbox {
    width: 100%;
    height: 300px;
  }

  .szbox {
    justify-content: end;
    display: flex;
  }
}

.card {
  padding: 25px;
}

.hzbox {
  color: #409EFF;
  cursor: pointer;
}

.savebox {
  display: flex;
  justify-content: center;
}
</style>
